<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="10">
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3"
            ><div class="grid-content bg-purple">
              <img
                src="../assets/QQ截图20220301152919.png"
                alt=""
                width="60px
              "
              /></div
          ></el-col>
          <el-col :xs="4" :sm="15" :md="15" :lg="15" :xl="15"
            ><div class="grid-content bg-purple-light" @click="getuser">
              宇宙无敌后台管理界面
            </div></el-col
          >
          <el-col :xs="4" :sm="3" :md="3" :lg="3" :xl="3"
            ><div class="grid-content bg-purple">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link" v-show="temp == 0">
                  用户名：{{ username }}您好
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 登录 -->
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link" v-show="temp == 1">
                  您当前未登录,去登录
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2">登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-container id="mainitem">
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            :router="true"
          >
            <el-submenu :index="val.path" v-for="(val, key) in menu" :key="key">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ val.authName }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="va.path"
                  v-for="(va, k) in val.children"
                  :key="k"
                  >{{ va.authName }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu></el-aside
        >
        <el-main> <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "VueHome",

  data() {
    return {
      username: "",
      menu: {},
      temp: 0,
    };
  },

  async mounted() {
    if (localStorage.getItem("userinfo")) {
      this.username = JSON.parse(localStorage.getItem("userinfo")).username;

      //侧边栏
      const { data } = await this.$axios.get("/menus");
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.menu = data.data;
      } else {
        this.$message.error(data.meta.message);
      }
    } else {
      this.temp = 1;
    }
  },

  methods: {
    getuser() {
      this.$axios.get("/users?pagenum=1&pagesize=1").then((serverBackData) => {
        const { data } = serverBackData;
        console.log(data);
      });
    },
    //退出按钮
    handleCommand(command) {
      if (command == 1) {
        confirm("确定退出吗");
        if (confirm) {
          localStorage.removeItem("userinfo");
        }
        this.$router.push({
          path: "/",
        });
        this.$message({
          message: "您已退出",
          type: "success",
        });
        this.$router.go(0);
      } else if (command == 2) {
        this.$router.push({
          path: "/login",
        });
      }
    },
  },
};

//  {
//           headers: {
//             Authorization:
//               "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2NDYyMjI0MTMsImV4cCI6MTY0NjMwODgxM30.47cO4m37znV9SKib37S49ohbN8Dq2NaQnmZUuwzR3QM",
//           },
//         }
</script>

<style lang="css">
* {
  margin: 0;
  padding: 0;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#mainitem {
  height: 850px;
}
</style>